﻿@model OSBIDE.Web.Models.Analytics.CalendarSettings

@using OSBIDE.Web.Models.Analytics
@using OSBIDE.Data.DomainObjects


@Styles.Render("~/Content/bootstrap.css")

<section data-tab="Analytics" id="calendar-section">

    <div class="col-xs-3"></div>
    <div data-wzstep="@WizardSteps.DataVisualization">

        @using (Html.BeginForm("GetMeasures", "Calendar", FormMethod.Post, new { @class = "form-horizontal", role = "form", id="calendarSettings" }))
        {
            var totalCheckStatus = Model.AggregateFunctionId == AggregateFunction.Total? "checked" : string.Empty;
            var avgCheckStatus = Model.AggregateFunctionId == AggregateFunction.Avg ? "checked" : string.Empty;
            
            <div class="row">

                <div class="col-xs-5">
                    <h2>Calendar of @CriteriaLookups.Courses.Single(x=>x.CourseId==Model.CourseId).DisplayText</h2>
                </div>

                <div class="col-xs-3">
                    <input type="radio" id="total" name="AggregationFunction" value="@AggregateFunction.Total" @totalCheckStatus /><label for="total">Total&nbsp;&nbsp;</label>
                    <input type="radio" id="average" name="AggregationFunction" value="@AggregateFunction.Avg" @avgCheckStatus /><label for="average">Average</label>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-2"></div>

                @foreach (var category in MeasureDefinitions.All.Keys)
                {
                    <div class="col-xs-2">
                        <h4>@category.ToString().ToDisplayText()</h4>
                        @foreach (var measure in MeasureDefinitions.All[category])
                        {
                            var checkedStatus = !string.IsNullOrWhiteSpace(Model.SelectedMeasures) && Model.SelectedMeasures.Split(',').Contains(measure.MeasureType.ToString("d")) ? "checked='checked'" : string.Empty;
                            var aggregateFunction = measure.AggregateFunction.HasValue ? "agg-func=" + measure.AggregateFunction.Value + "" : string.Empty;
                            <div>
                                <input type="checkbox" @checkedStatus @aggregateFunction id="@measure.MeasureType.ToString()" name="SelectedMeasureTypes" value="@((int)measure.MeasureType)" data-color="@measure.Color"/>
                                <label for="@measure.MeasureType.ToString()">@string.Format("{0} ({1})", measure.MeasureType.ToString().ToDisplayText(), measure.DataPointShape)</label>
                            </div>
                        }
                    </div>
                }
            </div>
        }

        <div class="row calendar-section">
            <div class="col-xs-3"></div>
            <div class="col-xs-9">
                <div id="no-data-message">
                    There is no data available.
                </div>
                <div id="calendar">
                    <div class="row">
                        <div class="col-xs-5"><h4 id="currentMonth">May 2013</h4></div>
                        <div class="col-xs-3">
                            <button id="back" name="back"><</button>
                            <button id="forward" name="forward">></button>
                        </div>
                    </div>

                    <div id="chart"></div>
                </div>
                <div id="hourly">
                    <div class="row">
                        <div class="col-xs-5"><h4 id="currentDay">December 21, 2014</h4></div>
                        <div class="col-xs-3"><a href="javascript:">back to calendar view</a></div>
                    </div>
                    <div id="hourlychart"></div>
                </div>
            </div>
        </div>
        <div data-type="spinner">
            <div class="col-xs-4"></div>
            <img src="@Url.Content("~/Content/icons/loading.gif")" class="col-xs-1" />
        </div>
    </div>
</section>

@section Scripts
{
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript" src="~/Scripts/Calendar/TrendingCalendar.js"></script>
    <script type="text/javascript" src="~/Scripts/Calendar/Calendar.js"></script>
}
